<template>
  <div>
    <!--//用表单包起来-->
    <el-form :model="params">
      <!--根据站点id进行查询-->
      <el-select v-model="params.siteId" placeholder="请选择">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId">
        </el-option>
      </el-select>

      <!--根据页面别名进行查询-->
      页面别名:<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      <el-button type="primary" v-on:click="handleCurrentChange" size="small">查询</el-button>
      <router-link class="mui-tab-item" :to="{path:'/cms/page/add/',query:{
        page:this.params.page,
        siteId:this.params.siteId
      }}">
        <el-button type="primary" size="small">新增页面</el-button>
      </router-link>
    </el-form>
    <el-table
      :data="list"
      stripe style="width: 100%">
    <el-table-column
      type="index"
      width="60">
    </el-table-column>
    <el-table-column
      prop="pageName"
      label="页面名称"
      width="120"
      property="首页">
    </el-table-column>
    <el-table-column
      prop="pageAliase"
      label="别名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="pageType"
      label="页面类型"
      width="150">
    </el-table-column>
    <el-table-column
      prop="pageWebPath"
      label="访问路径"
      width="250">
    </el-table-column>
    <el-table-column
      prop="pagePhysicalPath"
      label="物理路径"
      width="250">
    </el-table-column>
    <el-table-column
      prop="pageCreateTime"
      label="创建时间"
      width="180" >
    </el-table-column>
      <el-table-column prop="options" label="操作" width="220" >
        <!--通过插槽来添加按钮-->
        <template slot-scope="page">
          <el-button size="small" type="text" @click="edit(page.row.pageId)">编辑</el-button>
          <el-button size="small" type="text" @click="dele(page.row.pageId)">删除</el-button>
          <el-button @click="preview(page.row.pageId)" type="text" size="small">页面预览</el-button>
          <el-button size="small" type="primary" plain @click="postPage(page.row.pageId)">发布 </el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="this.params.size"
      :current-page="this.params.page"
      @current-change="changePage"
      style="float:right">
    </el-pagination>

  </div>
</template>
  <script>
    // /*编写页面静态部分，即model及vm部分。*/
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
          siteList:[], //站点列表
          list:[],
          total:50,
          params:{
            siteId:'',
            page:1,//页码
            size:5, //每页显示个数
            pageAliase:''
            }
         }
        },
      methods:{
        handleCurrentChange:function () {
          cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
            console.log(res);
            this.list = res.queryResult.list;
            // this.params.siteId = res.queryResult.list.siteId;
            this.total = res.queryResult.total;
          });
        },
        //页面预览
        preview(pageId){
          window.open("http://www.xuecheng.com/cms/preview/"+pageId)
        },
        postPage (pageId) {
          this.$confirm('确认发布该页面吗?', '提示', { }).then(() => {
            cmsApi.page_postPage(pageId).then((res) => {
              if(res.success){ console.log('发布页面id='+pageId);
              this.$message.success('发布成功，请稍后查看结果');
              } else{
                this.$message.error('发布失败');
              }
            });
          }).catch(() => { });
          },
        changePage(page){
          this.params.page = page;
          this.handleCurrentChange();
        },

        // 去site表中找sitename
        siteIdFound(){
          cmsApi.site_list().then((res)=>{
            this.siteList = res.list;
          });
        },

        //修改
        edit:function (pageId) {
          this.$router.push({ path: '/cms/page/edit/'+pageId,query:{
            page: this.params.page, siteId: this.params.siteId}
          })
        },
        //删除操作
        dele:function (pageId) {
          this.$confirm('确认删除此页面吗?', '提示', {}).then(() => {
            cmsApi.page_del(pageId).then((res)=>{
              console.log(res);
              if(res.success){
                this.$message({
                  type: 'success', message: '删除成功!'
                });
                //查询页面
                this.handleCurrentChange()
              }else{
                this.$message({ type: 'error', message: '删除失败!' });
              }
            })
          })
        }
      },

      // 从add页面回来，要进行数据的回显
      created(){
        this.params.page = Number.parseInt(this.$route.query.page || 1);
        this.params.siteId = this.$route.query.siteId || '';
      },
      // 钩子函数
      mounted(){
        //一加载就开始查询页面，默认初始化
        this.handleCurrentChange();


        // 模拟静态数据，仿造出站点信息
        this.siteList = [
          {
            siteId: '5a751fab6abb5044e0d19ea1',
            siteName: '门户主站'
          },
          {
            siteId: '102',
            siteName:'测试站'
          }
        ];
      }
    }
  </script>
<style>
  /*编写页面样式，不是必须*/
</style>
